<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/element.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../element/moment.min.js"></script>


    <style>
        .zebra-table tbody tr:nth-child(even) {
            background-color: #edecec;
            /* 设置偶数行的背景颜色 */
        }

        .el-input {
            width: 200px;
        }

        .status-gray {
            color: gray;
        }

        .status-agree {
            color: green;
        }

        .status-reject {
            color: red;
        }

        .status-unhandled {
            color: rgb(100, 42, 42);
        }

        .el-input {
            width: 200px;
        }
    </style>
</head>
<link rel="stylesheet" href="../../css/evaluate.css">

<body>
    <div id="app">
        <h2 style="text-align: center;">募捐活动审批</h2>
        <!-- 弹窗内容 -->
        <el-dialog :visible.sync="showEvaluation" title="评价信息">
            <div v-for="(item, index) in expandRowData" :key="index" class="outer-content">
                <div class="left-content">
                    <p>
                    <h3>募捐单ID: 同盾{{ item.donationId }}号募捐单</h3>
                    </p>
                    <p><strong>申请ID:</strong> {{ item.requestId }}</p>
                    <p><strong>时间:</strong> {{ item.time.substring(0, 10) }}</p>
                    <p><strong>状态:</strong> <strong>{{ item.reply }}</strong></p>
                </div>
                <div class="right-content">
                    <el-table :data="item.list">
                        <el-table-column label="评价人账号" prop="userId"></el-table-column>
                        <el-table-column label="建议情况" prop="status"></el-table-column>
                        <el-table-column label="评价金额" prop="donationAmount"></el-table-column>
                        <el-table-column label="评价内容" prop="message"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>

        <el-row class="custom-row" style="color: #B8860B;">
            <el-col :span="4">
                <el-select v-model="filterStatus" placeholder="请选择状态">
                    <el-option label="未审核" value=1></el-option>
                    <el-option label="已审核" value=2></el-option>
                </el-select>
            </el-col>

            <el-col :span="5">
                最低金额:<el-input v-model="minAmount" placeholder="最低金额" controls-position="right" style="color: #B8860B;">
                </el-input>
            </el-col>
            <el-col :span="5">
                最高金额:<el-input v-model="maxAmount" placeholder="最高金额" style="color: #B8860B;"></el-input>
            </el-col>
            <el-col :span="5">
                募捐人:<el-input v-model="searchName" placeholder="募捐人" style="color: #B8860B;"></el-input>
            </el-col>
            <el-col :span="5">
                <el-button @click="fetchData" style="background-color:#B8860B ; color: #1F1F1F;">查询</el-button>
            </el-col>
        </el-row>


        <!-- 换行要一定的间隔 -->
        <p v-if="showSelectedRows">选中的募捐单ID：{{ selectedRows.map(row => row.requestId).join(', ') }}</p>
        <p v-if="!showSelectedRows">选中的募捐单ID："不能选择以决定的募捐单"</p>
        <!-- 换行要一定的间隔 -->

        <el-row>
            <el-col :span="4">
                <el-button type="success" @click="batchApprove">批量通过</el-button>
            </el-col>
            <el-col :span="4">
                <el-button type="danger" @click="batchReject">批量驳回</el-button>
            </el-col>
        </el-row>

        <!-- <el-table class="zebra-table" :data="donationList" :default-sort="{ order: 'ascending'}"> -->

        <el-table class="zebra-table" :data="tableData" :default-sort="{ order: 'ascending'}"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="donationId" label="募捐单"></el-table-column>
            <el-table-column label="募捐人" prop="donationImage">
                <template slot-scope="scope">
                    <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                    <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="申请时间" sortable></el-table-column>
            <el-table-column prop="deadline" label="截止时间" sortable></el-table-column>
            <el-table-column prop="donationAmount" label="求助金额" sortable></el-table-column>
            <el-table-column prop="requestId" label="申请单号"></el-table-column>

            <el-table-column prop="pointsSum" label="材料积分" sortable></el-table-column>
            <el-table-column prop="totalReviewCount" label="管理员审核次数" sortable></el-table-column>
            <el-table-column prop="agree" label="同意率"></el-table-column>
            <el-table-column prop="reply" label="结果">
                <template slot-scope="scope">
                    <span :class="getStatusClass(scope.row.reply)">{{ scope.row.reply || '未处理' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="300px">
                <template slot-scope="scope">
                    <div class="btn-group" style="display: flex; justify-content: space-between;"> <el-button
                            type="primary" @click="viewDetails(scope.row)" style="margin-bottom: 10px;">看详情</el-button>
                        <el-button type="warning" @click="modifyAmount(scope.row)" v-if="!scope.row.reply"
                            style="margin-bottom: 10px;">改金额</el-button>
                        <el-button type="watch" @click="handleRowExpand(scope.row)">看评价</el-button>
                    </div>


                </template>
            </el-table-column>
        </el-table>

        <!--修改金额对话框-->
        <el-dialog :visible.sync="dialogVisible">
            <el-form :model="form" label-width="80px">
                <el-form-item label="修改金额">
                    <el-input v-model="form.amount"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleModify">确 定</el-button>
            </div>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                expandRowData: {},
                showEvaluation: false,
                filterStatus: '1',
                showSelectedRows: true,
                selectedRows: [],
                requestId: '',
                minAmount: '',
                maxAmount: '',
                searchName: '',
                minReviewCount: '',
                minAgreeRate: '',
                maxAgreeRate: '',
                dialogVisible: false,
                form: {
                    requestId: '',
                    amount: '',
                    reason: ''
                },
                tableData: [],
                List: []
            },
            watch: {
                filterStatus: function (newVal, oldVal) {
                    this.filter(); // 监听filterStatus的变化，并在变化时调用filter()方法
                }
            },
            created() {
                this.fetchData();
            },
            methods: {
                viewDetails(row) {
                    index = this.tableData.indexOf(row);
                    localStorage.setItem("index", index);
                    localStorage.setItem("donationId", row.donationId);
                    window.location.href = "../publicManage/checkDontion.html";
                },
                //获取评价的请求
                handleRowExpand(row) {
                    this.showEvaluation = !this.showEvaluation;
                    // 发起请求获取评价数据
                    if (row) {
                        axios.get('http://localhost:8888/api/evaluate/getAllByDonationId', {
                            params: {
                                donationId: row.donationId
                            }
                        })
                            .then(response => {
                                this.loading = false;
                                if (response.data.code === 0) {
                                    this.expandRowData = response.data.data;

                                } else if (response.data.code === 2) {
                                    this.expandRowData = [];
                                } else {
                                    this.expandRowData = null;
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('请求出错：', error);
                            });
                    }
                },
                //样式函数
                getStatusClass(reply) {
                    if (reply && reply.startsWith('同意')) {
                        return 'status-agree';
                    } else if (reply && reply.startsWith('驳回')) {
                        return 'status-reject';
                    } else {
                        return 'status-unhandled';
                    }
                },
                filter() {
                    if (this.filterStatus === '0' || this.filterStatus === '') {
                        this.tableData = this.List; // 不进行筛选
                    }
                    else if (this.filterStatus === '1') {
                        this.tableData = this.List.filter(item => !item.reply || item.reply === ''); // reply 为空的项
                    }
                    else if (this.filterStatus === '2') {
                        this.tableData = this.List.filter(item => item.reply); // reply 不为空的项
                    }
                    // this.tableData
                    let donationIds = this.tableData.map(item => item.donationId);
                    localStorage.setItem("donationIds", JSON.stringify(donationIds));
                },

                fetchData() {
                    // 调用后端接口获取待评议列表数据
                    axios.get('http://localhost:8888/api/donations/checkList', {
                        params: {
                            minAmount: this.minAmount,
                            maxAmount: this.maxAmount,
                            name: this.searchName
                        }
                    })
                        .then(response => {
                            if (response.data.code === 0) {
                                response.data.data.forEach(item => {
                                    item.time = moment(item.time).format('YYYY-MM-DD');
                                    item.deadline = moment(item.deadline).format('YYYY-MM-DD');
                                    item.totalReviewCount = item.agreeCount + item.rejectCount;
                                    if (item.agreeCount + item.rejectCount == 0) {
                                        item.agree = 0 + '%';
                                    }
                                    else
                                        item.agree = parseInt(item.agreeCount / (item.agreeCount + item.rejectCount) * 100) + '%';
                                });
                                this.List = response.data.data;
                                this.filter()
                                this.requestId = response.data.data[0].requestId;
                            } else {
                                console.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error(error);
                        });
                },
                handleSelectionChange(rows) {
                    // 判断已选中的行中是否有已经有回复的行
                    const repliedRows = rows.filter(row => row.reply !== "" && row.reply !== null && row.reply !== undefined);
                    if (repliedRows.length > 0) {
                        this.showSelectedRows = false;
                        // 如果有已经有回复的行，则从 selectedRows 数组中移除这些行
                        const repliedIds = repliedRows.map(row => row.requestId);
                        this.selectedRows = this.selectedRows.filter(row => !repliedIds.includes(row.requestId));
                        // 弹出提示信息
                        this.$message.warning(`以下募捐单已经处理过回复：${repliedIds.join(', ')}`);
                    } else {
                        this.showSelectedRows = true;
                        // 如果没有已经有回复的行，则更新 selectedRows 数组
                        this.selectedRows = rows;
                    }
                },
                //集体通过
                batchApprove() {
                    // 创建一个空数组，用于存储requestId
                    const requestIdList = [];
                    // console.log(selectedRows);
                    // 遍历 selectedRows 数组，将每行的requestId添加到数组中
                    this.selectedRows.forEach(row => {
                        console.log(row.requestId);
                        requestIdList.push(row.requestId);
                    });

                    // 调用后端接口进行批量通过操作
                    axios.post('http://localhost:8888/api/donations/agreeList', requestIdList)
                        .then(response => {
                            if (response.data.code === 0) {
                                this.$message.success(response.data.message)
                                // 执行其他操作或刷新数据等
                                this.fetchData()
                            } else {
                                console.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error(error);
                        });
                },
                // 集体撤回
                batchReject() {
                    // 创建一个空数组，用于存储requestId
                    const requestIdList = [];
                    console.log(this.selectedRows);
                    // 遍历 selectedRows 数组，将每行的requestId添加到数组中
                    this.selectedRows.forEach(row => {
                        console.log(row.requestId);
                        requestIdList.push(row.requestId);
                    });

                    // 调用后端接口进行批量驳回操作
                    axios.post('http://localhost:8888/api/donations/rejectList', requestIdList)
                        .then(response => {
                            if (response.data.code === 0) {
                                this.$message.success(response.data.message)
                                // 执行其他操作或刷新数据等
                                this.fetchData()
                            } else {
                                console.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error(error);
                        });
                },
                // 其他方法...

                modifyAmount(row) {
                    this.form.requestId = row.requestId;
                    this.form.amount = '';
                    this.dialogVisible = true;
                    this.currentRow = row;
                },
                handleModify() {
                    const url = 'http://localhost:8888/api/donations/agreeAndChangeAmount';
                    const requestData = {
                        requestId: this.form.requestId, // 替换为实际的请求ID
                        changeAmount: this.form.amount // 替换为实际的金额变更值
                    };

                    axios.post(url, null, { params: requestData })
                        .then(response => {
                            // 请求成功，处理返回的数据
                            console.log(response.data);
                            this.fetchData()
                        })
                        .catch(error => {
                            // 请求失败，处理错误信息
                            console.error(error);
                        }); // 处理修改金额逻辑，调用后端接口进行修改操作  
                    this.dialogVisible = false;
                }
            }
        });
    </script>
</body>

</html>